<template>
  <div>
    <list-searcher :searchList="searchList" v-model:searchForm="queryParams" @loadData="loadData" />

    <a-alert class="mb-5 items-start">
      <template #icon>
        <icon-exclamation-circle />
      </template>
      <div>1、订单存在换车时，每辆车的租金及保险费需根据车辆的使用天数分别计算，手续费则默认归换下车辆</div>
      <div>2、订单存在续租时，续租周期内的租金、保险费及手续费仅适用于续租期间，不影响下单时选择的租赁周期</div>
      <div>3、订单在使用期间购买了不计免赔、保险升级及其他保险费用，根据购买日至订单结束日计算每日保险费用，购买前不计算</div>
      <div>4、可导出查看费用明细</div>
    </a-alert>

    <table-index :table="table" @loadData="loadData">
      <template #table-summary>
        <div class="flex justify-end items-center w-full">
          <a-button v-if="queryParams.isFilter" type="primary" @click="handleExport">导出</a-button>
        </div>
      </template>
      <template #orderInfo="{ record }">
        <div class="order-info-item" v-if="record.orderCode">
          <div>自有</div>
          <div>
            <a-link @click="() => onOrderLink(record)">{{ record.orderCode }}</a-link>
          </div>
        </div>
        <div class="order-info-item" v-if="record.channelOrderCode">
          <div>渠道</div>
          <div>
            <a-link @click="() => onOrderLink(record)">{{ record.channelOrderCode }}</a-link>
          </div>
        </div>
        <tag type="primary" v-if="record.orderStatusName">{{ record.orderStatusName }}</tag>
      </template>
      <template #rentalPeriod="{ record }">
        <div class="content-item pickup" v-if="record.startTime">
          <div class="flex items-start mb-1">
            <tag type="warn" class="p-0">预取</tag>
            <div class="flex-1">
              {{ record.startTime }}
            </div>
          </div>
        </div>
        <div class="content-item return" v-if="record.endTime">
          <div class="flex items-start mb-1">
            <tag type="success" class="p-0">预还</tag>
            <div class="flex-1">
              {{ record.endTime }}
            </div>
          </div>
        </div>
        <div class="content-item pickup" v-if="record.actualStartTime">
          <div class="flex items-start mb-1">
            <tag type="warn" class="p-0">实取</tag>
            <div class="flex-1">
              {{ record.actualStartTime }}
            </div>
          </div>
        </div>
        <div class="content-item return" v-if="record.actualEndTime">
          <div class="flex items-start mb-1">
            <tag type="success" class="p-0">实还</tag>
            <div class="flex-1">
              {{ record.actualEndTime }}
            </div>
          </div>
        </div>
      </template>

      <template #carUseDateInfo="{ record }">
        <div v-for="(item, index) in JSON.parse(record.carUseDateInfo)" :key="item + index">
          <div>{{ item.startTime }} 至 {{ item.endTime }}</div>
          <div>({{ item.rentDays }})</div>
        </div>
      </template>
      <template #replaceInfoTitle>
        <span class="mr-1">车辆使用周期</span>
        <a-tooltip>
          <icon-exclamation-circle class="icon-tip" />
          <template #content>
            <div>1、车辆使用周期为车辆在该笔订单下真实使用的时间</div>
            <div>
              2、订单存在换车时，车辆租金、保险费根据车辆使用周期按天计算且归属于换下车，手续费及其他换车前/换车时添加的费用无需按天计算，直接归属换下车辆，换车后添加的费用归换上车
            </div>
          </template>
        </a-tooltip>
      </template>
      <template #deductibleTitle>
        <span class="mr-1">不计免赔</span>
        <a-tooltip>
          <icon-exclamation-circle class="icon-tip" />
          <template #content>
            <div>1、不计免赔=不计免赔+保险升级+其他配置的保险费用</div>
            <div>2、用车过车中添加不计免赔，则根据添加费用的时间至订单还车时间计算每日的保险费用</div>
            <div>3、如存在换车，则根据车辆使用周期*每日的保险费用=车辆在订单使用期间生成的不计免赔费用</div>
          </template>
        </a-tooltip>
      </template>
    </table-index>
  </div>
</template>

<script setup lang="ts">
  import { exportRentAmount, getRentDetailList } from '@/api/dashboard/vehicleAccounting'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { computed, inject, onMounted, reactive, ref } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { navigate2orderDetail } from '../../../utils'
  import { useExport } from '@/hooks/list'
  import { usePageDict } from '@/hooks/useDict'

  const { navigateTo } = useNavigate()

  const carStatusEnums = usePageDict('carStatusDict')
  const modalStatus = inject<any>('modalStatus')
  const closeModal = inject<any>('closeModal')
  const parentQueryParam = computed(() => modalStatus.queryParams)
  const queryParams = reactive<any>({
    carId: parentQueryParam.value.carId,
    licenseNo: parentQueryParam.value.licenseNo,
    orgIdList: parentQueryParam.value.orgIdList,
    startTime: parentQueryParam.value.startTime,
    endTime: parentQueryParam.value.endTime,
    feeCategory: parentQueryParam.value.feeCategory,
    isFilter: parentQueryParam.value.isFilter,
    profitFlag: parentQueryParam.value.profitFlag,
  })
  console.log('queryParams', queryParams)

  const searchList = [
    {
      label: '订单号',
      prop: 'orderCodeOrChannelCode',
      type: 'a-input',
    },
    {
      label: '订单渠道',
      prop: 'channelTypeList',
      type: 'sysdict-select',
      attrs: { code: 'short_order_channel_type', multiple: true },
      addable: false,
    },
    {
      label: '是否存在换车',
      prop: 'ifChangeCar',
      type: 'a-select',
      options: carStatusEnums.ifChangeEnums,
    },
  ]

  const columns = computed(() => {
    const result = [
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
        fixed: 'left',
        width: 120,
      },
      {
        title: '订单信息',
        dataIndex: 'orderInfo',
        slotName: 'orderInfo',
        width: 230,
      },
      {
        title: '渠道',
        dataIndex: 'channelTypeName',
      },
      {
        title: '取车门店',
        dataIndex: 'siteName',
      },
      {
        title: '还车门店',
        dataIndex: 'returnSiteName',
      },
      {
        title: '订单租赁周期',
        dataIndex: 'rentalPeriod',
        slotName: 'rentalPeriod',
        width: 220,
      },
      {
        title: '是否存在换车',
        dataIndex: 'ifChangeCarName',
      },
      {
        titleSlotName: 'replaceInfoTitle',
        title: '车辆使用周期',
        dataIndex: 'carUseDateInfo',
        slotName: 'carUseDateInfo',
        width: 190,
      },
    ]
    if (queryParams.feeCategory == 20) {
      return [
        ...result,
        {
          title: '租金总计',
          dataIndex: 'rentAmount',
        },
        {
          title: '线上费用',
          dataIndex: 'onlineAmount',
        },
        {
          title: '线下费用',
          dataIndex: 'offlineAmount',
        },
        {
          title: '车辆租金',
          dataIndex: 'carRentAmount',
        },
        {
          title: '基础保险',
          dataIndex: 'baseInsureAmount',
        },
        {
          title: '手续费',
          dataIndex: 'poundageAmount',
        },
        {
          title: '续租-车辆租金',
          dataIndex: 'carRerentAmount',
        },
        {
          title: '续租-基础保险',
          dataIndex: 'rerentBaseInsureAmount',
        },
        {
          title: '续租-手续费',
          dataIndex: 'rerentPoundageAmount',
        },
        {
          titleSlotName: 'deductibleTitle',
          title: '不计免赔',
          dataIndex: 'deductibleAmount',
        },
      ]
    } else {
      return [
        ...result,
        {
          title: '其他费用总计',
          dataIndex: 'otherAmount',
        },
        {
          title: '线上费用',
          dataIndex: 'onlineAmount',
        },
        {
          title: '线下费用',
          dataIndex: 'offlineAmount',
        },
      ]
    }
  })

  const table = useTable({
    columns: columns.value,
  })

  const loadData = useFetchTableDataApi(table, queryParams, getRentDetailList)

  onMounted(() => {
    loadData()
  })

  const handleExport = () => {
    useExport(exportRentAmount, queryParams)
  }

  const onOrderLink = (record: any) => {
    console.log('租金总计: ', record)
    const { orderId, orderCode, orderStatus, carId } = record

    // 后端说此版本没有长租，增加 orderType 复杂，只跳转短租
    navigate2orderDetail({ id: orderId, carId, orderCode, orderStatus, orderType: 1 }, navigateTo, closeModal)
  }
</script>
<style lang="less" scoped>
  .icon-tip {
    font-size: 16px;
    color: #165dffff;
    vertical-align: -3px;
  }
</style>
